/* 全局页面通用配置 ----start----*/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "微软雅黑", Arial, sans-serif;

    &:before,
    &:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}

html {
    height: 100%;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "微软雅黑", Arial, sans-serif;
    font-size: 20px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    position: relative;
    height: 100%;
    margin: 0;
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Helvetica, "Hiragino Sans GB", "微软雅黑", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
        display: block;
    }
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


@font-face {
    font-family: 'iconfont';  /* Project id 2112328 */
    src: url('//at.alicdn.com/t/font_2112328_rrqgaa8r3ni.woff2?t=1629641675977') format('woff2'),
         url('//at.alicdn.com/t/font_2112328_rrqgaa8r3ni.woff?t=1629641675977') format('woff'),
         url('//at.alicdn.com/t/font_2112328_rrqgaa8r3ni.ttf?t=1629641675977') format('truetype');
}





/* 全局页面通用配置 ----end----*/

//引入antd的全局样式组件
@import '~antd/dist/antd.css';



/* 页面全局的一个布局 */
#root{
    display: block;
    position: fixed; //生成绝对定位的元素， 相对于浏览器窗口进行定位
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #f8f8f8;   
}


.application-container{
    display: block;
    height: 100%;
    &.red{
        background-color: tomato;
    }
}

.layout-container{
    display:flex;
   
    height: 100%;

    aside{
        // 0 有剩余空间也不放大  0  空间不足也不缩小 260 占主轴空间260px
        flex:0 0 260px;
        height:100%;
        background-color:#001529;
        transition: flex  .25s  linear;  /* 具体属性or全部属性   运动时间 延迟时间  动画类型 linear 表示线性  */
        &.collapse{
            flex: 0 0 80px;
        }
      }
      > section{
          flex:1; //作用在子盒子上，让子盒子自动占用容器剩余空间
          width:0;
          height:100%;
          > nav {
              display:block;
              height:48px;
              padding: 8px 12px ;
              font-size: 24px;
              box-shadow: 0 0 10px rgba(0,0,0,.1);
                &::after{
                    content:'';
                    width:0;
                    height:0;
                    clear:both;
                }

               .ant-dropdown-link{
              float:right;
              font-size:.7rem;
              margin-top:6px;
               }
          }
         
          > article {
              display:block;
              height:calc(100% - 48px);
              padding:12px;
             
          }
          
      }

}
.nav-text{
    margin-bottom:  0 !important
}


//  引入一个全局通用样式，例如用户编辑，新增页面会用到
.page-layout{
    display:block;
    height:100%;
    background:#fff;
     > header {
        display:block;
        height:49px;
        border-bottom:solid  1px  #ddd;
        padding:8px  12px;
        text-align: right;
        .ant-input{
            width: 180px;
        }
        .ant-input,.ant-btn{
           margin-left: 12px;
        }
    }
    >article{
        display:block;
        height:calc(100% - 49px - 41px);
        padding:8px 12px;
    }
    >footer{
        display:block;
        height:41px;
        border-top:solid 1px #ddd;
        padding:8px  12px
    }
       //1、& 符号可以表示对父选择器的引用。
        //在一个内层选择器的前面，如果没有 & 符号，则这个内层选择器会被解析为父选择器的后代。
      /*  .xkd{                                   
              a{
                color: #eee;   
            }
          } 
         编译后
         .xkd a {
            color: #eee;
          }  */
        //如果内层选择器前面有一个 & 符号，则内层选择器会被解析为父选择器自身或父选择器的伪类。
                    /* .xkd{
                        &one{
                        font-size: 12px;
                        }
                        &:hover{
                            color: #fff;
                        }
                    }
                    编译后
                    .xkdone {
                        font-size: 12px;
                    }
                    .xkd:hover {
                        color: #fff;
                    } */

        //2、 >  符号作用： 不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）

        /* 
        
        例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

        h1 > strong {color:red;}
        这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

            <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
            <h1>This is <em>really <strong>very</strong></em> important.</h1>
        
        */
    &.no-footer{
        >article{
            height: calc(100% - 49px);
        }
    }
}     



.layout-loading {
   &.ant-spin-nested-loading{
     height:100%;
        .ant-spin-container{
            
            height: 100%;
        }
   }
}